<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form :form="form" :selfUpdate="true" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 10 } }">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="model && model.id > 0" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="名称">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '模板名称不能为空' }] }]"
            placeholder="请输入模板名称"
          />
        </a-form-item>
        <a-form-item label="签名">
          <AWM-select
            v-decorator="['signatureId', { rules: [{ required: true, message: '签名不能为空' }] }]"
            :addition="{status: 1}"
            placeholder="请输入选择签名"
            funStr="signatureByNoAuth"
          ></AWM-select>
        </a-form-item>
        <a-form-item label="类型">
          <a-radio-group v-decorator="['templateType', { rules: [{ required: true, message: '类型不能为空' }] }]" button-style="solid">
            <a-radio-button  v-for="it in template_templateTypeList" :key="it.id" :value="it.id" >
              {{it.name}}
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="发送区域">
          <a-radio-group v-decorator="['isOversea', { rules: [{ required: true, message: '发送区域不能为空' }], initialValue: 0 }]" button-style="solid">
            <a-radio-button  v-for="it in isOverseaList" :key="it.id" :value="it.id" >
              {{it.name}}
            </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="内容">
          <a-textarea
            v-decorator="['content', { rules: [{ required: true, message: '内容不能为空' }] }]"
            placeholder="请输入内容"
          />
          <div class="ant-collapse-content-box">
            <p>计费规则：</p>
            <p>
              短信计费包括短信签名，70字计1条短信费，超过70字则以67字每条计费，当短信中出现中文字符，则单个汉字、英文、标点和空格等都算一个字。
            </p>
            <p>创建说明：</p>
            <p>
              蛛蛛云信提供的模板短信由固定内容与多个变量构成，其中 ${xxx}
              为需要接口替换的变量，变量内容可以是汉字、字母、数字或者特殊字符组合，但单个变量内容长度不得超过30个字，一条模板短信中变量数量不限制，短信模板总字数限制300字内；例如:
            </p>
            <p class="desc-exp"><span>亲爱的</span><span class="">内容</span></p>
            <p class="desc-exp"><span>${name}</span><span class="desc-highlight">变量</span></p>
            <p class="desc-exp"><span>,您的云信账户余额不足</span><span class="">内容</span></p>
            <p class="desc-exp"><span>${money}</span><span class="desc-highlight">变量</span></p>
            <p class="desc-exp"><span>元，请及时充值，以免影响您的正常使用</span><span class="">内容</span></p>
          </div>
        </a-form-item>
        <a-form-item label="使用场景说明">
          <a-textarea
            v-decorator="['remark']"
            placeholder="请输入使用场景说明"
          />
        </a-form-item>

        <a-form-item label="用户">
          <AWM-select
            v-decorator="['userId', { rules: [{ required: true, message: '用户不能为空' }] }]"
            placeholder="请输入选择用户"
            funStr="userListByNoAuth"
          ></AWM-select>
        </a-form-item>

        <a-form-item label="三方模版id">
          <a-textarea
            v-decorator="['thirdTemplateId']"
            placeholder="请输入第三方的模版id"
          ></a-textarea>
        </a-form-item>

        <a-form-item label="状态">
          <a-select 
            v-decorator="['status', { rules: [{ required: true, message: '用户不能为空' }], initialValue: 2 }]"
          >
            <a-select-option v-for="it in templateStatusList" :key="it.id" :value="it.id">{{it.name}}</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item :wrapper-col="{ sm: {  offset: 4, span: 8 } }">
          <a-button type="primary" @click="handleOk"> 确定 </a-button>
          <a-button @click="handleCancel" style="margin-left:10px;"> 取消 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { getPlatformTemplateList, platformTemplateAdd, platformTemplateUpdate } from '@/api/sms'
import { templateTypeList, templateStatusList, template_templateTypeList, isOverseaList } from '@/utils/other'
import { uploadForQiniu } from '@/utils/qiniu'
import AWMSelect from '@/components/AWMSelect'
import { mapGetters } from 'vuex'
// 表单字段
const fields = [
  'id',
  'signatureId',
  'name',
  'content',
  'userId',
  'thirdTemplateId',
  'status',
  'templateType',
  'isOversea',
  'remark',
]

export default {
  name: 'form-platform-template',
  props: {
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      templateTypeList,
      templateStatusList,
      template_templateTypeList, 
      isOverseaList,
      signValue: 1,
      pageNum: 1,
      id: 1,
    }
  },
  components: {
    AWMSelect,
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    const route = this.$route
    console.log(route)
    if (route.path.indexOf('/update/') != -1) {
      this.id = route.params.id
      console.log(this.platformTemplateItem)
      if (this.platformTemplateItem.id) {
        let data = pick(this.platformTemplateItem, fields)
        console.log(data);
        this.form.setFieldsValue(data)
      } else {
        this.handleCancel()
      }
    }
  },
  methods: {
    getData() {
      return getPlatformTemplateList({ pageNum: 1, pageSize: 1, id: this.id }).then((res) => {
        console.log(res)
      })
    },
    onChangeSignType(a_value) {
      console.log(a_value.target.value)
      this.signValue = a_value.target.value
    },
    handleChangeAttr(a_files, a_str) {
      console.log(a_files, a_str)
      let self = this
      function successCB(res) {
        console.log('successCB', res)
        self[a_str].loading = false
        self[a_str].file = res.key
      }
      function complateCB(res) {
        console.log('complateCB', res)
      }
      function errorCB(err) {
        self[a_str].loading = false
      }
      uploadForQiniu(a_files.file, successCB, complateCB, errorCB).then((res) => {
        self[a_str].loading = true
      })
    },
    handleOk() {
      const self = this
      const form = self.form
      self.confirmLoading = true
      form.validateFields((errors, values) => {
        console.log(values)
        console.log(errors)
        if (!errors) {
          

          if (values.id > 0) {
            platformTemplateUpdate(values)
              .then((res) => {

                console.log(3);
                // this.saveCB()
                self.$store.dispatch('platformTemplateBackList',{}).then(() => {
                  console.log(2);
                  self.handleCancel()
                })
                self.$message.success('提交成功!')
              })
              .catch((err) => {
                // this.saveCB()
              })
          } else {
            delete values.id
            platformTemplateAdd(values)
              .then((res) => {
                // this.saveCB()
                self.$message.success('提交成功!')
                self.handleCancel()
              })
              .catch((err) => {
                // this.saveCB()
              })
          }
        } else {
          self.confirmLoading = false
        }
      })
    },
    handleCancel() {
      // this.$router.push({path: ''})
      let query = this.$route.query
      this.$router.push({ path: `/platformTemplate-list/list/`, query })
    },
  },
  computed: {
    ...mapGetters({ baseUrl: 'baseUrl', platformTemplateItem: 'platformTemplateItem' }),
  },
  watch: {},
}
</script>
<style scoped lang="less">
.upload-img {
  max-width: 84px;
  max-height: 84px;
}
// /deep/ .ant-form-item {
//   margin-bottom: 10px;
//   .ant-form-item-label {
//     line-height: 28px;
//   }
// }
.ant-collapse-content-box {
  p {
    line-height: 24px;
    margin-bottom: 5px;
  }
  .desc-exp {
    display: inline-block;
    max-width: 330px;
    & > span{
            display: block;
        margin-right: 5px;
        text-align: center;
        &:first-child {
      border-bottom: 1px solid #999;
    }
    }
  }
}
</style>

 